<template>
    <div>
        <el-row class="bg-indigo-500 min-h-screen">
            <el-col :span="16" class="flex items-center justify-center flex-col">
                <h1 style="color:#ffffff;font-size:40px;font-weight:700;">欢迎来到我的代码世界</h1>
            </el-col>
            <el-col :span="8" class="bg-light-50 flex items-center justify-center flex-col">
                <h1 style="color:#000000;font-size:40px;font-weight:700;">欢迎回来</h1>
                <el-divider style="width:300px;"><span style="color:#c0c0c0;">账号和密码登录</span></el-divider>
                <el-form
                    ref="ruleFormRef"
                    :model="ruleForm"
                    :rules="rules"
                    style="margin-top:30px;"
                >
                    <el-form-item label="账号" prop="username">
                        <el-input v-model="ruleForm.username" placeholder="请输入用户名"/>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="ruleForm.password" type="password" placeholder="请输入密码"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm" style="width:90%;margin:30px auto;">用户登录</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    name: 'Vue3ViteLogin',

    data() {
        return {
            ruleForm:{
                username:"admin",
                password:"admin123"
            },
            rules:{
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 5, max: 11, message: '长度在5-11位', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 8, max: 16, message: '长度在8-16位', trigger: 'blur' },
                ],
            },
        };
    },

    mounted() {
        
    },

    methods: {
        submitForm(){
            if(this.ruleForm.username=="admin"&&this.ruleForm.password=="admin123"){
                sessionStorage.setItem("loginType",'admin5713')
                this.$router.push({
                    path:"/home"
                })
            }
        },
    },
};
</script>
<style scoped>
    
</style>